<template>
<div class="hasData">
    <!-- 显示收听记录 -->
    <div class="ListeningRecord">
        <div class="ListeningRecordLeft" v-show="!isShowSelect">{{totalNums+leftTitle}}</div>
        <!-- 全选按钮 -->
        <div class="ListeningRecordLeft multipleCheckBox" v-show="isShowSelect" @click="multipleSelectBtn">
            <div class="selectBox">
                <img src="https://youyang-cdn.mdshuzhi.com/upload/icon_gouxuan@2x.png" v-show="isMultipled" />
            </div>
            <span>全选</span>
        </div>
        <div class="ListeningRecordRight">
            <!-- 多选按钮 -->
            <div class="multipleCheck" v-show="!isShowSelect" @click="selectHandle">
                <div class="listenIcon">
                    <img src="https://youyang-cdn.mdshuzhi.com/upload/icon_duoxuan@2x.png" />
                </div>
                <div class="listenText">多选</div>
            </div>
            <div class="listenText" style="color:#F86342" v-show="isShowSelect" @click="multipledUnsubscribeBtn">{{isSelected==0 ? '取消' : '删除'}}</div><!-- +isSelected+'个已选的'+leftTitle -->
        </div>
    </div>
    <!-- 歌曲列表 -->
    <scroller :on-infinite="infinite" ref="myscroller" class="musicList">
      <li class="musicItem" v-for="(item,index) in list" :key="index">
          <div class="selectBox" v-show="isShowSelect" @click="singleSelectBtn(item.commonId)">
              <img src="../../../../static/images/icon_gouxuan@2x.png" v-show="item.select" />
          </div>
          <div class="musicItemBox">
              <div class="musicItemLeft">
                  <div class="musicImg">
                      <img :src="item.imgUrl" />
                  </div>
                  <div class="musicTitle">
                      <div class="musicText">{{item.title}}</div>
                      <a :href="item.videoPath" class="lookText" v-if="item.hasVideo==1">看</a>
                  </div>
              </div>
              <div class="musicItemRight">
                  <!-- 收听历史 -->
                  <router-link class="listenText" :to="'/Playing?audioId='+item.id" v-if="listenFlag">听</router-link>
                  <div class="listenText" @click="listenBtn(item.rid,item.type)" v-if="!listenFlag">听</div>

                  <!-- 收听历史 -->
                  <div class="rightImg marginLine" v-if="isNoMyDownloads && listenFlag" @click="downLoadBtn(item.id)">
                      <img src="../../../../static/images/icon_download@2x.png" />
                  </div>
                  <!-- 我的收藏 -->
                  <div class="rightImg marginLine" v-if="isNoMyDownloads && !listenFlag" @click="downLoadBtn(item.rid)">
                      <img src="../../../../static/images/icon_download@2x.png" />
                  </div>
                  <div class="rightImg" v-if="isNoMyDownloads" @click="shareBtn(item)">
                      <img src="../../../../static/images/icon_share@2x.png" />
                  </div>
              </div>
          </div>
      </li>
      <!-- <div v-if="noDate" class="noDataClass">没有更多数据了</div> -->
    </scroller>
</div>
</template>

<script>
import controller from "@/components/controllers/controllers";
import wx from "weixin-js-sdk";
import {
    Toast
} from "mint-ui";
export default {
    name: "listItemCom",
    data() {
        return {
            list: [],
            isShowSelect: false, //是否显示选择按钮
            isShowSingleSelect: true, //是否点击当个选择按钮
            currentId: null, //当前歌曲的id
            multipleList: [], //存储选中的id
            isSelected: 0,
            isMultipled: false, //是否已全选
            isNoMyDownloads: true, //是否显示下载页面中的两个按钮
            listenFlag: true,
        };
    },
    timer: null,
    props: {
        musicList: {
            type: Array,
            default () {
                return {};
            },
        },
        totalNums: {
            type: Number,
        },
        noDate: {
            type: Boolean,
            default () {
                return false;
            },
        },
        type: Number,
    },
    watch: {
        musicList() {
            console.log("musicList更新");
            this.list = this.musicList;
        },
    },
    //方法集合
    methods: {
        handleScroll(e){
            let that = this  //此this指向的是vue
            console.log('此时是',e.wheelDelta)
            if (e.wheelDelta < 0) {
                that.$refs.myscroller && (that.$refs.myscroller.scrollBy(0, 50, true));
            } else {
              that.$refs.myscroller && (that.$refs.myscroller.scrollBy(0, -50, true));
            }
        },
        // 分享按钮
        shareBtn(item) {
            let path
            if (item.type == 1) {
                path = "/ExclusiveColumnList?id=" + item.rid
            } else if (item.type == 2) {
                path = "/albumDetail?id=" + item.rid
            } else if (item.type == 3) {
                path = "/Playing?id=" + item.rid
            }
            this.$Share(item.rid, item.type,item.title, item.imgUrl, path);
            // wx.onMenuShareAppMessage({
            //   title: item.title, // 分享标题
            //   desc: item.desc, // 分享描述
            //   link: '/', // 分享链接
            //   imgUrl: item.imgUrl, // 分享图标
            //   type: 'music', // 分享类型,music、video或link，不填默认为link
            //   dataUrl: item.audioUrl, // 如果type是music或video，则要提供数据链接，默认为空
            //   success: function (res) {
            //     // 用户确认分享后执行的回调函数
            //     console.log('分享成功',res)
            //   },
            //   cancel: function (err) {
            //     // 用户取消分享后执行的回调函数
            //     console.log('用户取消分享后执行的回调函数',err)
            //   },
            // });
        },
        // 下载按钮
        downLoadBtn(rid) {
            controller
                .download({
                    rid,
                })
                .then((res) => {
                    console.log("单个下载", res);
                    Toast({
                        message: "下载成功",
                        duration: 1000,
                    });
                })
                .catch((err) => {
                    console.log(err);
                    Toast({
                        message: "下载失败",
                        duration: 1000,
                    });
                });
        },
        // 多选按钮
        selectHandle() {
            this.isShowSelect = !this.isShowSelect;
            console.log("多选按钮");
        },
        //单个按钮
        singleSelectBtn(commonId) {
            let id = commonId;
            let isMultipled = this.isMultipled; //是否全选
            let isSelected = this.isSelected; //已选多少个
            let multipleList = this.multipleList; //存储选中的id
            let list = this.list;
            // 判断是否已经选中
            if (multipleList.includes(id)) {
                // 选中的，就直接删除掉
                let idx = multipleList.indexOf(id);
                multipleList.splice(idx, 1);
                isSelected--;
                isMultipled = false;
            } else {
                multipleList.push(id);
                // 判断是否全选
                if (multipleList.length == list.length) {
                    isMultipled = true;
                }
                isSelected++;
            }
            console.log("单个选择按钮id", id, "已选个数isSelected", isSelected, list);
            list.forEach((item) => {
                if (multipleList.includes(item.commonId)) {
                    item.select = true;
                } else {
                    item.select = false;
                }
            });

            this.isShowSingleSelect = true;
            this.currentId = id;
            this.multipleList = multipleList;
            this.isSelected = isSelected;
            this.isMultipled = isMultipled;
            this.list = list;
        },
        // 全选按钮
        multipleSelectBtn() {
            console.log("全选按钮");
            let multipleList = this.multipleList; //存储选中的id
            let isMultipled = this.isMultipled; //是否全选
            let isSelected = this.isSelected; //已选多少个
            let list = this.list;
            if (multipleList.length != 0) {
                if (multipleList.length == list.length) {
                    multipleList.length = 0;
                    isMultipled = false;
                    isSelected = 0;
                    list.map((item) => {
                        item.select = false;
                    });
                } else {
                    list.map((item) => {
                        if (!item.select) {
                            item.select = true;
                            multipleList.push(item.commonId);
                        }
                    });
                    isMultipled = true;
                    isSelected = list.length;
                }
            } else {
                // 还没有选择任何一条数据
                list.map((item) => {
                    item.select = true;
                    multipleList.push(item.commonId);
                });
                isMultipled = true;
                isSelected = list.length;
            }
            this.multipleList = multipleList;
            this.isMultipled = isMultipled;
            this.isSelected = isSelected;
            this.list = list;
        },
        // 多个取消下载按钮
        multipledUnsubscribeBtn() {
            let multipleList = this.multipleList;
            let str = multipleList.join(",");
            let that = this;
            console.log(str);
            if (Boolean(str)) {
                this.$emit("removeItem", str);
                this.timer = setTimeout(() => {
                    this.isShowSelect = false;
                }, 500);
            } else {
              this.isShowSelect = !this.isShowSelect;
                // Toast({
                //     message: "请选择音频",
                //     duration: 2000,
                // });
            }
        },
        // 听的事件按钮
        listenBtn(rid, type) {
            /**
             * 1.三个页面
             * 2.每个页面有几种跳转方式
             * 3.收听历史只跳转到播放页面
             */
            console.log("听按钮", rid, type);
            let path = "";
            // 听按钮 1是栏目，2是合辑，3是音频，4是达人榜，5是评论
            if (type == 1) {
                path = "/ExclusiveColumnList?id=" + rid;
            } else if (type == 2) {
                path = "/albumDetail?id=" + rid;
            } else if (type == 3) {
                path = "/Playing?audioId=" + rid;
            } else if (type == 4) {
                path = "/Other?id=" + rid;
            } else if (type == 5) {
                path = "/Comment?rid=" + rid + "&type=" + type;
            }
            this.$router.push({
                path,
            });
        },
        // 上拉加载
        infinite(done) {
          console.log("上拉加载", this.noDate);
          setTimeout(() => {
            if (this.noDate) {
              console.log(this.noDate,this.$refs.myscroller.finishInfinite())
                this.$refs.myscroller.finishInfinite(true); //这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
            } else {
              console.log("进行下一次加载操作");
              this.$emit("addDataBtn", 1);
              done(); //进行下一次加载操作
            }
          },1500)
        },
    },
    created() {
        window.addEventListener('mousewheel',this.handleScroll);
        let title = this.$route.meta.title;
        let leftTitle = this.leftTitle;
        switch (title) {
            case "收听历史":
                leftTitle = "条收听记录";
                this.listenFlag = true;
                break;
            case "我的收藏":
                leftTitle = "条收藏记录";
                this.listenFlag = false;
                break;
            case "我的下载":
                leftTitle = "条下载记录";
                this.isNoMyDownloads = false;
                break;
        }
        this.leftTitle = leftTitle;
        console.log(this.$route, this.leftTitle, leftTitle, this.musicList);
    },
    mounted(){
      console.log(document.body.offsetHeight)
      console.dir(document.getElementsByClassName('musicList')[0])
    },
    destroyed(){
      window.removeEventListener('mousewheel',this.handleScroll)
      clearTimeout(this.timer);
    }
};
</script>

<style lang="scss" scoped>
// 无数据
.noDataClass {
    text-align: center;
    width: 100%;
    line-height: 45px;
    color: #ccc;
    font-size: 24px;
    min-width: 640px;
    max-width: 960px;
    margin: 40px auto 0;
}
/* 有数据 */
.hasData {
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
    // position: relative;
}

.ListeningRecord {
    width: 100%;
    height: 87px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .ListeningRecordLeft,
    .listenText {
        font-size: 24px;
        color: #a8acbb;
    }

    .ListeningRecordRight {
        display: flex;

        .multipleCheck {
            display: flex;
            align-items: center;
        }

        .listenIcon {
            margin-right: 11px;
        }

        img {
            width: 24px;
            height: 23px;
        }
    }

    /* 全选按钮 */
    .multipleCheckBox {
        // width: 250px;
        display: flex;
    }

    .multipleCheckBox img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 2px solid #a8acbb;
        margin-right: 24px;
        position: relative;
    }
}

/* 歌曲列表 */
.musicList {
    width: 100%;
    min-width: 640px;
    max-width: 960px;
    margin: 0 auto;
    top: 87px!important;
    bottom: 15px!important;
    // height: calc(100vh - 100px)!important;
    height: auto !important;
    /deep/ &._v-container{
      left: 50%;
      transform: translateX(-50%);
      ._v-content{
        padding-bottom: 40px;
      }
    }

    .musicItem {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 32px;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .musicItemBox {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .musicItemLeft {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex: 1;

            .musicImg {
                width: 80px;
                height: 80px;
                border-radius: 4px;
                overflow: hidden;
                margin-right: 24px;
            }

            .musicTitle {
                flex: 1;
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .musicText {
                    font-size: 32px;
                    color: #323232;
                    margin-right: 10px;
                    width: 244px;
                    // width: 350px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                // 看
                .lookText {
                    color: #f5b7a9;
                    font-size: 24px;
                    border-radius: 4px;
                    width: 48px;
                    height: 32px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border: 1px solid #f5b7a9;
                }
            }
        }

        /* 右边 */
        .musicItemRight {
            height: 100%;
            display: flex;
            align-items: center;

            .listenText {
                font-size: 32px;
                text-align: center;
                width: 60px;
                line-height: 60px;
                border-radius: 50%;
                border: 1px solid #f5b7a9;
                color: #f5b7a9;
            }

            .rightImg,
            .rightImg image {
                width: 36px;
                height: 36px;
            }

            .marginLine {
                margin: 0 10px;
            }
        }
    }

    img {
        width: 100%;
        height: 100%;
    }
}

/* 选择框 */
.selectBox {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #a8acbb;
    margin-right: 24px;
    position: relative;
    overflow: hidden;

    img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
}
</style>
